<template>
  <el-upload ref="uploader"
             style="display: inline-block"
             class="upload-demo"
             action="#"
             :disabled="btnLoading"
             :accept="accept"
             :before-upload="beforeUpload"
             :http-request="() => {}"
             :show-file-list="false">
    <el-button type="primary"
               :disabled="btnLoading"
               :loading="loading || btnLoading">
      导入模板</el-button>
  </el-upload>
</template>
<script>
var sheetType = ".xlsx,.xls,.cvs";
import upload from "./UploadExcel.vue";
export default {
  name: "BasicImport",
  components: upload,
  props: {
    api: {
      type: Object
    },
    orderImport: {
      type: Boolean,
      default: false
    },
    btnLoading: [Boolean]
  },
  data () {
    return {
      accept: sheetType,
      loading: false
    };
  },
  watch: {
    btnLoading: {
      immediate: true,
      handler (val) {
        return val;
      }
    }
  },
  created () { },
  methods: {
    //文件上传
    beforeUpload (file) {
      const param = new FormData();
      param.append("file", file);
      this.importExcel(param);
    },
    async importExcel (file) {
      this.loading = true;
      // if (!this.orderImport) {
      const fullscreenLoading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // }
      this.$emit("update:btnLoading", true);
      let { code, data, message } = await this.api.importExcel(file).catch(err => {
        fullscreenLoading.close();
        this.$emit("update:btnLoading", false);
        this.loading = false;
        console.log(err);
      });
      if (data?.length > 0 || data?.data?.length) {
        this.$emit("upload", data);
      }
      //  else {
      //   this.$message.warning("模板为空！")
      // }
      // if (!this.orderImport) {
      fullscreenLoading.close();
      // }
      this.$emit("update:btnLoading", false);
      this.loading = false;
      if (code != 0) {
        this.$message.error(message || data?.message);
      }
    }
  }
};
</script>
